<template>
  <div class="add-box">
    <el-form
      ref="menuForm"
      :model="formData"
      :rules="rules"
      label-width="80px"
      v-loading="isLoading"
    >
      <el-form-item label="上级菜单" prop="parentId">
        <el-cascader
          :options="treeMenu"
          v-model="formData.parentId"
          :props="{
            checkStrictly: true,
            emitPath: false,
            label: 'menuName',
            value: 'id'
          }"
          :style="{ width: '100%' }"
          clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item label="所属系统" prop="source">
        <el-input
          placeholder="请输入所属系统"
          v-model="formData.source"
          maxlength="32"
        />
      </el-form-item>
      <el-form-item label="菜单名称" prop="menuName">
        <el-input
          placeholder="请输入菜单名称"
          v-model="formData.menuName"
          maxlength="64"
        />
      </el-form-item>
      <el-form-item label="菜单编码" prop="menuCode">
        <el-input placeholder="请输入菜单编码" v-model="formData.menuCode" />
      </el-form-item>
      <el-form-item label="菜单类型" prop="type">
        <el-select
          v-model="formData.type"
          placeholder="请选择菜单类型"
          :style="{ width: '100%' }"
          @change="changeType"
        >
          <el-option
            v-for="(item, index) in dictOptions['grass-core.menu.type']"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input placeholder="请输入排序" v-model="formData.sort" />
      </el-form-item>
      <!-- icon -->
      <el-form-item label="图标" prop="icon">
        <IconSelect placeholder="请选择图标" :value.sync="formData.icon" />
      </el-form-item>
      <el-form-item label="菜单层级" prop="levels">
        <el-input placeholder="请输入菜单层级" v-model="formData.levels" />
      </el-form-item>

      <el-form-item label="路由地址" prop="routePath">
        <el-input placeholder="请输入路由地址" v-model="formData.routePath" />
      </el-form-item>
      <el-form-item label="URL" prop="url">
        <el-input placeholder="请输入URL" v-model="formData.url" />
      </el-form-item>
      <el-form-item label="权限标识" prop="permission">
        <el-input placeholder="请输入权限标识" v-model="formData.permission" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="formData.status"
          placeholder="请选择菜单类型"
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in dictOptions['grass-core.menu.status']"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" style="width: 100%">
        <el-input
          placeholder="请输入备注信息"
          v-model="formData.remark"
          maxlength="500"
          type="textarea"
          resize="none"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { dictMixin } from '@/mixin/dict'
import { elementMixin } from '@/mixin/element'
import IconSelect from '@/components/IconSelect'
import { arr2tree } from '@/utils'
export default {
  name: 'AddMenu',
  mixins: [dictMixin, elementMixin],
  components: { IconSelect },
  props: {
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 弹窗取消
    close: {
      type: Boolean,
      default: false
    },
    // 弹窗确认
    confirm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dictCode: ['grass-core.menu.type', 'grass-core.menu.status'],
      isLoading: false,
      formData: {
        parentId: '',
        remark: '',
        source: '',
        menuName: '',
        menuCode: '',
        type: '',
        sort: '',
        icon: '',
        levels: '',
        routePath: '',
        url: '',
        permission: '',
        status: ''
      },
      rules: {
        menuName: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择菜单类型', trigger: 'change' }
        ],
        sort: [{ required: true, message: '请输入菜单排序', trigger: 'blur' }],
        source: [
          { required: true, message: '请输入所属系统', trigger: 'blur' }
        ],
        levels: [
          { required: true, message: '请输入菜单层级', trigger: 'blur' }
        ],
        menuCode: [
          { required: true, message: '请输入菜单编码', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择菜单状态', trigger: 'change' }
        ],
        url: [{ required: true, message: '请输入url', trigger: 'blur' }],
        routePath: [
          { required: true, message: '请输入路由地址', trigger: 'blur' }
        ]
        // icon: [{ required: true, message: '请选择菜单图标', trigger: 'change' }]
      },
      dictOptions: [],
      treeMenu: []
    }
  },
  watch: {
    popData: {
      handler(data) {
        this.$set(this.formData, 'parentId', 'grass-boot')
        if (data) {
          const { type, status } = data || {}
          // this.queryDetail(id)
          this.$set(this, 'formData', {
            ...data,
            type: type ? String(type) : '',
            status: status ? String(status) : ''
          })
        }
      },
      deep: true,
      immediate: true
    },
    confirm: {
      handler(confirm) {
        this.submit()
      }
    }
  },
  created() {
    this.queryTreeData()
  },
  methods: {
    // // 查询详情
    // async queryDetail(id) {
    //   try {
    //     const res = await this.$api.menuManage.menuDetail({ id })
    //   } catch (error) {}
    // },
    // 查询上级菜单
    async queryTreeData() {
      try {
        const response = await this.$api.menuManage.queryList({ type: '1' })
        const { records } = response.data || {}
        if (response.code === '1000') {
          const menu = { id: 'grass-boot', menuName: '主菜单', children: [] }
          const treeList = arr2tree(records, {
            id: 'id',
            parentId: 'parentId',
            childrenKey: 'children'
          })
          menu.children = treeList || []
          this.treeMenu = treeList || []
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 提交
    async submitMenu() {
      // const { id } = this.popData || {}
      const {
        parentId,
        remark,
        source,
        menuName,
        menuCode,
        type,
        sort,
        icon,
        levels,
        routePath,
        url,
        permission,
        status
      } = this.formData
      const id = this.popConfig.type === 'edit' ? this.popData.id : null
      const params = {
        id,
        parentId,
        remark,
        source,
        menuName,
        menuCode,
        type,
        sort,
        icon,
        levels,
        routePath,
        url,
        permission,
        status,
        isBuryingPoint: 0 //不传会报错 isBuryingPoint
      }
      delete params.children
      const apiName = id ? 'menuUpdate' : 'menuAdd'
      const typeName = id ? '修改成功！' : '新增成功！'
      const res = await this.$api.menuManage[apiName](params)
      if (res.code === '1000') {
        this.$message.success(typeName)
        this.$emit('onFinish', 'menu-edit')
      }
    },
    /**
     * 提交
     */
    submit() {
      this.$refs.menuForm.validate((e) => {
        if (e) {
          this.submitMenu()
        }
      })
    },
    // 选择类型
    changeType(e) {
      console.log(e, 'e')
    }
  }
}
</script>

<style lang="scss" scoped>
.add-box {
  color: #333;
  padding: 0 20px;
  ::v-deep .el-form {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      width: 50%;
    }
  }
}
</style>
